<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/2/23
  Time: 23:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>登录</title>

    <style>
        body {
            background: url("/img/bj.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            margin: 0;
            padding: 0;
        }

        .center-box {
            background-color: rgba(2, 0, 3, 0.56);
            padding-bottom: 40px;
            position: absolute;
            text-align: center;
            border: 2px solid #727369;
            top: 40%;
            left: 50%;
            height: 400px;
            width: 400px;
            border-radius: 20px;

            transform: translate(-50%, -50%);
            /*background: url("../img/bj.jpg");*/
        }

        .form-input {
            border: 2px solid #eef5af;
            width: 300px;
            height: 45px;
            border-radius: 5px;
            margin-bottom: 20px;
            text-align: center;

        }


        .sub {
            width: 100px;
            height: 45px;
            border: 0;
            border-radius: 5px;
            margin-bottom: 20px;
            text-align: center;
        }

        .sub:hover {
            color: #7985b0;
            width: 110px;
            height: 47px;
        }


        .form-input:hover {
            width: 320px;
            height: 47px;
            border: 4px #64ff6e solid;
            color: #795ebe;
            font-size: 24px;
        }

        input::-webkit-input-placeholder {
            color: #ccc;
        }

        input::-ms-input-placeholder {
            color: #ccc;
        }

    </style>
</head>
<body>

<div class="center-box">
    <h1 style="color: #e85757;font-family: Calibri"><font color="#7fffd4">L</font> <font color="red">O</font> <font
            color="#bc8f8f">G</font> I N</h1>

    <%--<form class="myForm" method="post" action="/login/toLogin">--%>
    <h5 class="tishi" hidden="true" style="color: red"></h5>
    <input type="text" placeholder="username" required id="username" class="form-input"><br>
    <input type="password" placeholder="password" required id="password" class="form-input"><br>
    <input type="submit" value="登录" onclick="submitdete()" class="sub">
    <%--</form>--%>

</div>

</body>

<script type="text/javascript" src="/js/jquery.min.js"></script>

<script type="text/javascript">
    function submitdete() {
        let username = $("#username").val();
        let password = $("#password").val();
        let user = {
            username:username,
            password:password
        };

        let stringify = JSON.stringify(user);

        $.ajax({
            url:"/login/login",
            type:"post",
            dataType:"JSON",
            contentType:"application/json;charset=utf-8",
            data:stringify,
            success:function (data) {
                let ok = data.isOk;
                if (ok===true){
                    window.location.href="/index/index";
                }else {
                    $(".tishi").text(data.msg);
                    $(".tishi").attr("hidden",false);
                }
            }
        })


    }
</script>


